<template>
  <div class="singerdetail-container">
    <div class="top-container" v-if="singerDetail.hasOwnProperty('artist')">
      <div class="singer-avater">
        <el-image :src="singerDetail.artist.cover" fit="cover"></el-image>
        {{singerDetail.artist.cover}}
      </div>

      <div class="singer-info">
        <p class="singer-name">{{singerDetail.artist.name}}</p>
        <p class="singer-description">{{singerDetail.artist.briefDesc}}</p>

        <ul class="singer-follow">
          <li>
            单曲
            <span>{{singerDetail.artist.musicSize}}</span>
          </li>
          <el-divider direction="vertical" />
          <li>
            专辑
            <span>{{singerDetail.artist.albumSize}}</span>
          </li>
          <el-divider direction="vertical" />
          <li>
            MV
            <span>{{singerDetail.artist.mvSize}}</span>
          </li>
        </ul>

        <el-button class="follow-btn" size="large" color="rgb(31,31,31)" round>
          <el-icon class="el-icon--right">
            <Plus />
          </el-icon>
          关注 {{singerDetail.artist.followeds || ''}}
        </el-button>
      </div>
    </div>

    <div class="singerdetail-nav-container">
      <ul class="singerdetail-nav">
        <li>作品</li>

        <li
          v-for="item in singerDetailNav"
          :key="item.id"
          @click="checkNav(item.key)"
          :class="[item.key === currentNavItem ?'active' : '']"
        >{{item.name}}</li>
      </ul>
    </div>

    <div class="singerdetail-content-container">
      <div class="singerdetail-content-wrap">
        <div class="top-music-wrap" v-show="currentNavItem === 'topMusic'">
          <ranking-card :songList="topSong"></ranking-card>
        </div>

        <div class="album-wrap" v-show="currentNavItem === 'album'">
          <album-card v-for="item in topAlbum" :key="item.id" :albumInfo="item"></album-card>
        </div>

        <div class="mv-wrap" v-show="currentNavItem === 'MV'">
          <MV-card v-for="item in singerMV" :key="item.id" :mvInfo="item" @click="router.push({
                    name: 'MVDetail',
                    params: {mvid:item.id}
                })"></MV-card>
        </div>

        <div class="detail-wrap" v-show="currentNavItem === 'detail'">
          <span>{{singerDetail.artist.briefDesc}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, onMounted, shallowReactive } from "vue";
import { HttpManager } from "../api/index";
import RankingCard from "../components/UserMusic/Ranking-Card.vue";
import { useRoute,useRouter } from "vue-router";
import { singerDetailNav } from "../assets/data/singer-detail";
import AlbumCard from "../components/Album/Album-Card.vue";
import MVCard from "../components/MV/MV-Card.vue";
export default defineComponent({
  components: { RankingCard, AlbumCard, MVCard },
  setup() {
    const route = useRoute();
    const router = useRouter();

    let singerDetail = ref({});
    let topSong = ref([]);
    let topAlbum = ref([]);
    let singerMV = ref([]);
    let currentNavItem = ref("topMusic");
    const singerId = ref(route.params.id);

    const getSingerInfo = (id) => {
      HttpManager.getSingerDetail({ id }).then((res: any) => {
        console.log("获取到歌手详情", res.data);
        singerDetail.value = res.data;
      });
    };

    const getSingerTopSong = (id) => {
      HttpManager.getSingerTopSong({ id }).then((res: any) => {
        console.log("获取到歌手热门歌曲", res.songs);
        topSong.value = res.songs;
      });
    };

    const getSingerAlbum = (id) => {
      //获取歌曲专辑

      HttpManager.getSingerAlbum({ id, limit: 30 }).then((res: any) => {
        console.log("获取到歌手专辑", res.hotAlbums);
        topAlbum.value = res.hotAlbums;
        // topSong.value = res.songs
      });
    };

    const getSingerMV = (id) => {
      //获取歌手MV
      HttpManager.getSingerMV({id}).then((res: any) => {
        console.log("获取到歌手MV", res.mvs);
        singerMV.value = res.mvs;
        // topAlbum.value = res.hotAlbums;
        // topSong.value = res.songs
      });
    };

    const checkNav = (key) => {
      console.log("navcheck", key);

      if (key === "album") {
        getSingerAlbum(singerId.value);
      }else if(key === 'MV'){
        getSingerMV(singerId.value)
      }

      currentNavItem.value = key;
    };

    getSingerInfo(singerId.value);
    getSingerTopSong(singerId.value);

    return {
      singerDetail,
      topSong,
      singerDetailNav,
      currentNavItem,
      topAlbum,
      singerMV,
      router,
      getSingerAlbum,
      checkNav,
      getSingerInfo,
      getSingerTopSong,
      getSingerMV
    };
  },
});
</script>
 
<style lang = "scss" scoped>
@import "../assets/css/singer-detail.scss";
</style>